<template>
	<div id="FromsDQ">
		<select name='prov' v-model="prov">
			<option value="">省</option>
			<option v-for="(option,index) in arr" :key="index" :value="option.value" :data-i="index==0?'selected':'none'" >{{option.label}}</option>-->
		</select>
		<select name='city' v-model="city">
			<option value="">市</option>
			<option v-for="(option,index) in cityArr" :key="index" :value="option.value">{{option.label}}</option>
		</select>
		<select name="district" v-model="district">
			<option value="">区</option>
			<option v-for="(option,index) in districtArr" :key="index" :value="option.value">{{option.label}}</option>
		</select>

	</div>
</template>
<script>
	import arrAll from './address.json'
	export default {
		name: 'FromsDQ',
		data() {
			return {
				arr: arrAll,
				prov: '',
				city: '',
				district: '',
				cityArr: [],
				districtArr: []
			}
		},
		props: ['value'],
		created() {
			
			if(this.value) {
				
				this.prov = this.value[0] || '';
				this.city = this.value[1] || '';
				this.district = this.value[2] || '';
			}
		},
		methods: {
			onChange() {
				
				this.$emit('input', [this.prov, this.city, this.district])
				

			},
			updateCity: function() {
				const provItem = this.arr.find(item => item.value == this.prov);
				if(provItem) {
					this.cityArr = provItem.children;
					this.districtArr = [];
					this.city = "";
					this.district = "";
				}
			},
			updateDistrict: function() {
				const cityItem = this.cityArr.find(item => item.value == this.city);
				if(cityItem) {
					this.districtArr = cityItem.children || [];
					this.district = "";
				}
			}
		},
		beforeMount: function() {

		},
		watch: {
			prov: ['updateCity','onChange'],
			city: ['updateDistrict','onChange'],
			district: ['onChange']

		}
	}
</script>
<style lang='scss'>
	select{
		width:200px;
		height: 40px;
		margin-bottom:20px;
		font-size: 29px;
		color:#787878;
	}

</style>